<template>
  <div class="form">
    <!-- 输入表单，则不需要写value属性， v-model 自动收集表单数据 -->
    <p>账号名称： <input type="text" v-model="formData.username" /></p>
    <p>账号密码： <input type="password" v-model="formData.password" /></p>

    <!-- 2. 如果是选择表单，则需要把双向数据绑定和value分开写  -->
    <p>
      性别：
      <input type="radio" name="gender" v-model="formData.gender" value="男" />
      男
      <input type="radio" name="gender" v-model="formData.gender" value="女" />
      女
      <input
        type="radio"
        name="gender"
        v-model="formData.gender"
        value="保密"
      />
      保密
    </p>
    <p>
      爱好：
      <input
        type="checkbox"
        name="hobby"
        v-model="formData.hobby"
        value="打游戏"
      />
      打游戏
      <input
        type="checkbox"
        name="hobby"
        v-model="formData.hobby"
        value="写代码"
      />
      写代码
      <input
        type="checkbox"
        name="hobby"
        v-model="formData.hobby"
        value="找王姐"
      />
      找王姐
      <input
        type="checkbox"
        name="hobby"
        v-model="formData.hobby"
        value="点关注"
      />
      点关注
    </p>

    <!-- select 不用给每一项的option写 -->
    <p>
      城市选择：
      <select v-model="formData.sel">
        <option value="深圳">深圳</option>
        <option value="广州">广州</option>
        <option value="湛江">湛江</option>
        <option value="东莞">东莞</option>
        <option value="佛山">佛山</option>
      </select>
    </p>
    <p>
      介绍：
      <textarea cols="30" rows="10" v-model="formData.desc"></textarea>
    </p>
    <!-- 4. 默认复选框单独使用时，返回的结果是布尔值 -->
    <p>
      <input type="checkbox" v-model="formData.isAgree" /> 接受<a href="#"
        >用户协议</a
      >
    </p>
    <p>
      <button @click="fn">点击提交</button>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1. 建议：表单的数据最好使用对象的方式进行管理
      formData: {
        username: '',
        password: '',
        gender: '',
        // 3. 爱好是多个的，默认值必须是一个数组
        hobby: [],
        sel: '',
        desc: '',
        isAgree: false
      }
    }
  },
  methods: {
    fn() {
      // 在这里把数据收集起来进行请求发送
      console.log(this.formData)
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  width: 400px;
  padding: 20px;
  margin: 10px;
  background-color: #eee;
}
</style>
